<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-24 
 -->


<template>
	<div class="site-wrapper site-page--login">
	  <div class="site-content__wrapper">
	    <div class="site-content">
	      <div class="brand-info">
	        <p class="brand-info__intro"></p>
	      </div>
	      <div class="login-main">
			<img src="@/assets/img/logo1.png" alt="" style="width: 350px;margin: 0 auto;display: block;margin-bottom: 40px;">
			<img src="@/assets/img/title.png" alt="" style="width: 350px;margin: 0 auto;display: block;margin-bottom: 30px;">
	        <el-form :model="form" :rules="rules" ref="formNode" v-on:keyup.enter="dataFormSubmit()" status-icon>
	          <el-form-item prop="userName">
	            <el-input v-model="form.userName" placeholder="帐号"></el-input>
	          </el-form-item>
	          <el-form-item prop="password">
	            <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
	          </el-form-item>
	          <el-form-item prop="captcha">
	            <el-row :gutter="20">
	              <el-col :span="14">
	                <el-input v-model="form.captcha" placeholder="验证码">
	                </el-input>
	              </el-col>
	              <el-col :span="10" class="login-captcha">
	                <img :src="captchaPath" @click="getCaptcha()" alt="">
	              </el-col>
	            </el-row>
	          </el-form-item>
	          <el-form-item>
	            <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
	          </el-form-item>
	        </el-form>
	      </div>
	    </div>
	  </div>
	</div>
</template>

<script lang='js'>
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { useInstance, create_uuid } from '@/common';
  import { requireurl } from "@/api/constants";
  import { LOGIN } from "@/api";
  export default defineComponent({
    name: 'Login',
    setup(props, {emit, slots}) {
      const { $message, $router } = useInstance();
      const state = reactive({
          formNode: null,
          captchaPath: '',
          rules: {
            userName: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
            password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
            captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
          },
          form: {
            userName: 'admin',
            password: '123456',
            captcha: '',
            uuid: ''
          },
        });
      const getCaptcha = () => {
        state.form.uuid = create_uuid();
        state.captchaPath = `${requireurl}/captcha.jpg?uuid=${state.form.uuid}`
      };
      onMounted(async () => {
        getCaptcha();
      })
      const dataFormSubmit = () => {
        state.formNode.validate(valid => {
          if (!valid) return $message.error("请填写必填信息！");
          // LOGIN({...state.form})
          $router.replace('/home');
        });

      };
     return {
       getCaptcha,
       dataFormSubmit,
       ...toRefs(state)
      }
     }
  })

</script>

<style lang='scss' scoped>
.site-wrapper.site-page--login {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: rgba(38, 50, 56, 0.3);
	  overflow: hidden;
	}
	.site-wrapper.site-page--login:before {
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: -1;
	  width: 100%;
	  height: 100%;
	  content: "";
	}
	.site-wrapper.site-page--login .site-content__wrapper {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  padding: 0;
	  margin: 0;
	  overflow-x: hidden;
	  overflow-y: auto;
	  background-color: transparent;
	}
	.site-wrapper.site-page--login .site-content {
	  min-height: 100%;
	  padding: 30px 500px 30px 30px;
	  box-sizing: border-box;
	  background-image: url('~@/assets/img/login_bg2.png');
	  background-size: 100% 100%;
	}
	.site-wrapper.site-page--login .brand-info {
	  margin: 220px 100px 0 90px;
	  color: #fff;
	  box-sizing: border-box;
	}
	.site-wrapper.site-page--login .brand-info__text {
	  margin: 0 0 22px 0;
	  font-size: 48px;
	  font-weight: 400;
	  text-transform: uppercase;
	}
	.site-wrapper.site-page--login .brand-info__intro {
	  margin: 10px 0;
	  font-size: 16px;
	  line-height: 1.58;
	  opacity: 0.6;
	  box-sizing: border-box;
	}
	.site-wrapper.site-page--login .login-main {
	  position: absolute;
	  top: 0;
	  right: 0;
	  padding: 170px 60px 0px;
	  width: 470px;
	  min-height: 100%;
	  background-color: #fff;
	  box-sizing: border-box;
	}
	@media screen and (max-width: 1367px) {
	    .site-wrapper.site-page--login .login-main {
	      padding: 100px 60px 0px;
	    }
	}
	.site-wrapper.site-page--login .login-title {
	  font-size: 16px;
	  margin: 16px 0;
	  box-sizing: border-box;
	}
	.site-wrapper.site-page--login .login-captcha {
	  overflow: hidden;
	}
	.site-wrapper.site-page--login .login-captcha > img {
	  width: 100%;
	  cursor: pointer;
	}
	.site-wrapper.site-page--login .login-btn-submit {
	  width: 100%;
	  margin-top: 38px;
	  box-sizing: border-box;
	}
	.login-main .brand-info__text{
		font-size: 30px;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 30px;
		box-sizing: border-box;
	}
</style>
